<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传历史记录 - LangChain RAG</title>
    <!-- 引入Vue 3 -->
    <script src="static/js/vue3.4.15.global.min.js"></script>
    <!-- 引入Tailwind CSS -->
    <!-- <script src="static/js/tailwind.3.4.17.js"></script> -->
    <link href="static/css/tailwind3.4.17.css" rel="stylesheet">     
    <!-- 引入Font Awesome图标 -->
    <link href="static/css/font-awesome.min.4.7.0.css" rel="stylesheet">

    
    <style>
        /* 自定义样式 */
        body {
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex h-16">
                <div class="flex items-center">
                    <span class="text-primary text-lg font-bold flex items-center">
                        <i class="fa fa-wrench mr-2"></i>
                        信息系统
                    </span>
                </div>
                <div class="flex-grow"></div> <!-- 用于占据中间的空间 -->
                <div class="flex items-center space-x-4">
                    <a href="/query" class="text-secondary hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-search mr-1">搜索</i> 
                    </a>
                </div>                
                <div class="flex items-center space-x-4">
                    <a href="/upload" class="text-secondary hover:text-primary px-2 py-3 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-upload mr-1">上传</i> 
                    </a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="/category_page" class="text-secondary hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-regular fa-list mr-1">分类</i> 
                    </a>
                </div>     
                 <!-- <div class="flex items-center space-x-4">
                    <a href="/history_page" class="text-primary hover:text-primary/90 px-3 py-2 rounded-md text-sm font-medium transition-custom bg-primary/10">
                        <i class="fa fa-history mr-1">历史</i> 
                    </a>
                </div>                                  -->
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="mb-6">
            <h1 class="text-2xl font-semibold text-gray-900">上传历史记录</h1>
            <p class="text-gray-500 mt-1">查看和管理您的所有上传记录</p>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm overflow-hidden card-shadow">
            <!-- 过滤条件区域 -->
            <div class="p-4 bg-gray-50 border-b border-gray-200">
                <div class="flex flex-col md:flex-row md:items-center gap-4">
                    <div class="flex-grow flex flex-col sm:flex-row gap-2">
                        <select v-model="historyFilter.type" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="">所有类型</option>
                            <option value="doc">文档</option>
                            <option value="text">文本</option>
                            <option value="image">图片</option>
                            <option value="weburl">网页URL</option>
                            <option value="weburl_batch">批量URL</option>
                        </select>
                        <select v-model="historyFilter.category" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="">所有分类</option>
                            <option v-for="category in categories" :key="category.name" :value="category.name">
                                {{ category.name }}{{ category.desc ? ` - ${category.desc}` : '' }}
                            </option>
                        </select>
                        <div class="flex flex-col sm:flex-row gap-2">
                            <input type="date" v-model="historyFilter.startDate" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <span class="flex items-center px-1">至</span>
                            <input type="date" v-model="historyFilter.endDate" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        </div>
                    </div>
                    <button 
                        type="button"
                        class="px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom btn-shadow"
                        @click="loadHistory"
                    >
                        <i class="fa fa-search mr-1"></i> 查询
                    </button>
                </div>
            </div>
            
            <!-- 历史记录列表 -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上传时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">文件信息</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-for="(record, index) in historyRecords" :key="record.id || index">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span v-if="record.upload_type === 'doc'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">文档</span>
                                <span v-else-if="record.upload_type === 'text'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">文本</span>
                                <span v-else-if="record.upload_type === 'image'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">图片</span>
                                <span v-else-if="record.upload_type === 'weburl' || record.upload_type === 'weburl_batch'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">URL</span>
                                <span v-else class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">其他</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ record.category || '未分类' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ formatDate(record.timestamp) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <div v-if="record.files_info && record.files_info.length > 0">
                                    <div v-for="(file, fileIdx) in record.files_info.slice(0, 3)" :key="fileIdx">
                                        {{ file.original_filename || file.original_url || '未知文件' }}
                                    </div>
                                    <div v-if="record.files_info.length > 3" class="text-xs text-gray-400">
                                        +{{ record.files_info.length - 3 }} 个文件
                                    </div>
                                </div>
                                <div v-else>
                                    无文件信息
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span v-if="record.files_info && record.files_info.every(f => f.success)" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">全部成功</span>
                                <span v-else-if="record.files_info && record.files_info.some(f => f.success)" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">部分成功</span>
                                <span v-else class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">失败</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button 
                                    class="text-primary hover:text-primary/80 mr-2 transition-custom"
                                    @click="viewRecordDetails(record)"
                                >
                                    <i class="fa fa-eye mr-1"></i>查看
                                </button>
                            </td>
                        </tr>
                        <!-- 空状态 -->
                        <tr v-if="!historyLoading && historyRecords.length === 0">
                            <td colspan="6" class="px-6 py-8 text-center text-sm text-gray-500">
                                <i class="fa fa-history text-3xl mb-2"></i>
                                <p>暂无上传历史记录</p>
                            </td>
                        </tr>
                        <!-- 加载状态 -->
                        <tr v-if="historyLoading">
                            <td colspan="6" class="px-6 py-8 text-center text-sm text-gray-500">
                                <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary mx-auto mb-2"></div>
                                <p>加载历史记录中...</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 分页控件 -->
            <div v-if="!historyLoading && historyTotalCount > 0" class="flex items-center justify-between px-4 py-3 sm:px-6 border-t border-gray-200">
                <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium">{{ historyCurrentPageStart }}</span> 至 <span class="font-medium">{{ historyCurrentPageEnd }}</span> 条，共 <span class="font-medium">{{ historyTotalCount }}</span> 条结果
                        </p>
                    </div>
                    <div>
                        <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
                            <button
                                type="button"
                                class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
                                :disabled="historyCurrentPage === 1"
                                @click="goToHistoryPage(1)"
                            >
                                <span class="sr-only">第一页</span>
                                <i class="fa fa-angle-double-left"></i>
                            </button>
                            <button
                                type="button"
                                class="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
                                :disabled="historyCurrentPage === 1"
                                @click="goToHistoryPage(historyCurrentPage - 1)"
                            >
                                <span class="sr-only">上一页</span>
                                <i class="fa fa-angle-left"></i>
                            </button>
                            <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 bg-white">
                                {{ historyCurrentPage }} / {{ historyTotalPages }}
                            </span>
                            <button
                                type="button"
                                class="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
                                :disabled="historyCurrentPage === historyTotalPages"
                                @click="goToHistoryPage(historyCurrentPage + 1)"
                            >
                                <span class="sr-only">下一页</span>
                                <i class="fa fa-angle-right"></i>
                            </button>
                            <button
                                type="button"
                                class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
                                :disabled="historyCurrentPage === historyTotalPages"
                                @click="goToHistoryPage(historyTotalPages)"
                            >
                                <span class="sr-only">最后一页</span>
                                <i class="fa fa-angle-double-right"></i>
                            </button>
                        </nav>
                    </div>
                </div>
                <!-- 移动端分页 -->
                <div class="flex items-center justify-between w-full sm:hidden">
                    <span class="text-sm text-gray-700">
                        共 {{ historyTotalCount }} 条
                    </span>
                    <nav class="flex space-x-2">
                        <button
                            type="button"
                            class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50"
                            :disabled="historyCurrentPage === 1"
                            @click="goToHistoryPage(historyCurrentPage - 1)"
                        >
                            上一页
                        </button>
                        <button
                            type="button"
                            class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50"
                            :disabled="historyCurrentPage === historyTotalPages"
                            @click="goToHistoryPage(historyCurrentPage + 1)"
                        >
                            下一页
                        </button>
                    </nav>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-auto">
        <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
            <p class="text-center text-sm text-gray-500">
                © {{ new Date().getFullYear() }} LangChain RAG 系统 | 版本 1.0.0
            </p>
        </div>
    </footer>

    <!-- 错误提示 -->
    <div v-if="showError" class="fixed bottom-4 right-4 bg-danger text-white p-4 rounded-md shadow-lg max-w-xs z-50 animate-fade-in">
        <div class="flex items-center">
            <i class="fa fa-exclamation-circle mr-2"></i>
            <span>{{ errorMessage }}</span>
            <button class="ml-2 text-white focus:outline-none" @click="closeError">
                <i class="fa fa-times"></i>
            </button>
        </div>
    </div>

    <!-- Vue 应用脚本 -->
    <script src="static/js/history.js"></script>
</body>
</html>